<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>CSS Framework - Raxan User Guide</title>
    <link href="../raxan/ui/css/master.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 8]> <link rel="stylesheet" href="../raxan/ui/css/master.ie.css" type="text/css"><![endif]-->
    <link href="../raxan/ui/css/default/theme.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="highlight/styles/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="highlight/highlight.js"></script>
    <script type="text/javascript">
        <!--
        hljs.initHighlightingOnLoad('javascript','html','php','css');
        //-->
    </script>
    <!--[if lt IE 7]>
        <style type="text/css"> form input.textbox { height: 26px; }</style>
    <![endif]-->
</head>

<body>
    <div class="container">
        <div id="header" class="rax-header-pal rax-metalic">
            <h2 class="ltm bottom c14">Raxan User Guide</h2>
            <ul>
                <li><a href="../../index.html">Home</a></li>
                <li><a href="index.html">Overview</a></li>
                <li><a href="features.html">Features</a></li>
                <li><a href="table-of-contents.html" title="Table of Content">Contents</a></li>
                <li><a href="../examples">Examples</a></li>
            </ul>
            <ul class="search">
                <li>
                    <form class="tpm c9" name="form1" action="../tools/search.php" method="get">
                        <input class="c6 textbox round left" placeholder="Search" type="text" name="q" value="" title="Search User Guide"  />
                        <input class="c2 button round left ltm" type="submit" value="Go" />
                    </form>
                </li>
            </ul>

        </div>
        <hr class="space"/>
        <div class="master-content-wrapper">
            <div class="container prepend-top c48 master-content"><h2>The CSS Framework</h2>

<p>With Raxan's CSS framework you can easily go from simple fixed-width designs to complex multi-column elastic layouts with just a few lines of html code.
No Javascript is required to accomplish multi-column layouts, thus making it easier to create nice looking, accessible web pages in minutes.</p>

<p>The framework basically provides a set of style sheet classes, typographic text and a grid layout system that can be used to create complex designs and
multi-column web pages. Each cell within the grid is 20px wide and 20px long. The width and/or height of a combination of cells, can be assigned to any
html element by using the CSS classes <strong>c1, c2,...,c50, c60, c70, c80, c80,c100</strong> and <strong>r1, r2,...,r50</strong> respectively, where the numbers represents the number of
columns or the number of rows. The default grid contains 100 columns and 50 rows (2000px X 1000px)</p>

<h3>Your First Raxan CSS Web Page</h3>

<p>Creating a web page with Raxan is very simple. You can use any HTML or Text Editor (even Notepad) to create and modify the web pages.</p>

<p>Let's start off by creating an empty web page called <strong>mywebpage.html</strong> inside the folder where you have unzipped the library files
(e.g. c:\development\raxanfiles). Now open the file <strong>mywebpage.html</strong> inside your favorite text or html editor to begin editing.</p>

<p>Add the following the html code to the <strong>mywebbpage.html</strong> file:</p>

<pre><code>&lt;!DOCTYPE html&gt;

&lt;html&gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
    &lt;title&gt;Your Title Here...&lt;/title&gt;
    &lt;link href="raxan/ui/css/master.css" rel="stylesheet" type="text/css" /&gt;
    &lt;!--[if lt IE 8]&gt;
        &lt;link rel="stylesheet" href="raxan/styles/master.ie.css" type="text/css"&gt;
    &lt;![endif]--&gt;
    &lt;link href="raxan/ui/css/default/theme.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;

&lt;body&gt;
    Put your content here...
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>Note: Replace "Your Title Here..." with a title for your page and "Put your content here..." with the html content for the page.</p>

<p>In the above html code you will notice that there are three <link> tags present within the <head> of the page. This is to include the <strong>master.css</strong> style
sheet (and <strong>master.ie.css</strong> for Internet Explorer). These files are optional and you can remove them to include your own style sheets but if you would
like to take advantage of the CSS framework classes then you will be need to include the master style sheets. The <strong>theme.css</strong> style sheet file provides
additional classes to modify the look and feel of the page.</p>

<p>Copy and paste the following code in your new web page replacing the "Put your content here..." text:</p>

<pre><code>&lt;div&gt;
    My First Raxan web page
&lt;/div&gt;
</code></pre>

<p>Save the file and view it inside your web browser. Note: You can view the file inside a browser by double clicking on the filename in the file folder.</p>

<p>Viewing the file inside the browser appears flat and normal (without any styling). To change this, modify the code to reflect the following:</p>

<pre><code>&lt;div class="container c30 pad"&gt;
    &lt;h1&gt;My First Raxan web page&lt;/h1&gt;
    &lt;hr /&gt;
&lt;/div&gt;
</code></pre>

<p>Save the file and refresh your browser to see the changes. The page should appear centered with a nice looking title.</p>

<p>What we have done is to convert the &lt;div&gt; into a container with a width of 30 columns or cells (20*30 = 600 pixel) and a 10 pixel padding around
the &lt;div&gt; content.</p>

<p>Our next step is to add a box with the words "Hello World" inside it. To do this, simply create a div and assign the <strong>rax-box</strong> and <strong>alert</strong> classes
to it:</p>

<pre><code>&lt;div class="container c30 pad"&gt;
    &lt;h1&gt;My First Raxan web page&lt;/h1&gt;
    &lt;hr /&gt;
    &lt;div class="rax-box alert"&gt;
        Hello World!
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Save the file and refresh your browser to see the changes.</p>

<p>To become a bit more creative try modifying your code to reflect the following:</p>

<pre><code>&lt;div class="rax-box container c30 success pad"&gt;
    &lt;h1 class="box-title"&gt;My First Raxan web page&lt;/h1&gt;
    &lt;hr /&gt;
    &lt;div class="rax-box alert column c10"&gt;
        Hello World!
    &lt;/div&gt;
    &lt;div class="rax-box info column c10"&gt;
        This is my first web page.
    &lt;/div&gt;
    &lt;br class="clear" /&gt;&lt;!-- use to clear the column float --&gt;
&lt;/div&gt;
</code></pre>

<p>We've only created a simple web page with a title and some basic CSS classes. There's no telling what you can do with a little creativity.</p>

<h3>Creating a New Theme</h3>

<p>To create a new CSS theme for your web page, follow the steps outlined below:</p>

<ol>
<li>Copy and rename the raxan/ui/css/default theme folder. (e.g. raxan/ui/css/sunnyday)</li>
<li>Modify the classes insid the <strong>theme.css</strong> file. In some cases you might want to merge the content of the <strong>master.css</strong> into your theme so that
you only need to load a single file.</li>
<li><p>Include the new theme inside the web page:</p>

<pre><code>&lt;link href="raxan/ui/css/sunnyday/theme.css" type="text/css" /&gt;
</code></pre></li>
</ol>

<h3>Additional CSS Classes</h3>

<p>To learn more about the full list of classes that are available within the Raxan CSS framework, see the <a href="css-classes.html">CSS Framework Classes</a>.</p>

<hr class="clear" />

<p align="right">Up Next: <a href="css-classes.html" title="CSS Framework Classes">CSS Framework Classes</a> </p>
</div>
            
            <div id="footer" class="container c48 rax-active-pal round rax-glossy">
                <ul class="clearfix">
                    <li><a href="index.html">Overview</a></li>
                    <li><a href="features.html">Features</a></li>
                    <li><a href="new-features.html">What's new</a></li>
                    <li><a href="table-of-contents.html" title="Table of Content">Contents</a></li>
                    <li><a href="../examples">Examples</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>

